<template>
	<view class="main">
		<view class="head">
			<view v-if="activityData?.activityStartTime > timeStr" class="sta_0">
				<template v-if="startDate===dateStr">
					<text class="txt">即将开始</text>
				</template>
				<template v-else>
					距离活动开始还有:<text class="txt">{{activityData?.residueDay}}天</text>
				</template>
			</view>
			<view v-else-if="activityData?.activityEndTime < timeStr" class="sta_2">
				活动已结束
			</view>
			<view v-else class="sta_1">
				活动进行中
			</view>
			<view class="item">
				<view class="cover">
					<image :src="activityData?.activityPoster" mode="widthFix" style="width: 100%;"></image>
				</view>
				<view class="title">
					{{activityData?.activityName}}
				</view>
        <view class="time" v-if="activityData?.applyStartTime">
          报名时间:{{ activityData?.applyStartTime }} 至 {{ activityData?.applyEndTime }}
        </view>
				<view class="time">
					活动时间:{{ activityData?.activityStartTime }} 至 {{ activityData?.activityEndTime }}
				</view>
				<view class="num">
					活动人数:约{{ activityData?.activityPeople }}人
				</view>
				<view class="addr" v-if="activityData?.activityAddr">
					活动地址:{{ activityData?.activityAddr}}
				</view>
				<!-- <view class="at">
					报名时间: {{ activityData?.applyStartTime }}至 {{ activityData?.applyEndTime }}
				</view> -->
			</view>
		</view>
		<view class="con">
			<view class="tab">
				<view class="label" @click="handleShowRule(false)">
					<view class="title">活动介绍</view>
					<view v-if="!showRules" class="line"></view>
				</view>
				<view class="label" @click="handleShowRule(true)">
					<view class="title">活动规则</view>
					<view v-if="showRules" class="line"></view>
				</view>
			</view>
			<view class="info">
				<view v-if="!showRules" class="words">
					<view class="txt" v-if="activityData.photoArr">
						<image show-menu-by-longpress v-for="(item,index) in activityData.photoArr" :key="index" :src="item" mode="widthFix"></image>
					</view>
				</view>
				<view v-else class="rules">
					<rich-text class="txt" style="line-height: 60rpx;"  :nodes="activityData.activityRule"></rich-text>
				</view>
			</view>
		</view>
		<view class="foot">
			<view class="box">
				<view class="btn_r" v-if="activityData?.joinStatus === 1" :class="activityData?.activityStartTime<timeStr && timeStr<activityData?.activityEndTime ? '':'over'" @click="handleClick">
					立即参与
				</view>
				<view class="btn_r" v-else @click="handleIsVoteBackClick">
					去参与吧
				</view>
			</view>
		</view>
		<view class="modal" v-if="showModal">
			<view class="box">
				<view class="h">
					<image show-menu-by-longpress src="https://honor-hall.oss-cn-chengdu.aliyuncs.com/qrr_20241212171405.jpg" mode="aspectFill"></image>
				</view>
				<view class="m">
					<text>活动具体详情请识别二维码添加小助手</text>
					<text>避免错过更多福利</text>
				</view>

				<view class="f" @click="handleConfirm">确认</view>
			</view>
			<!-- <view class="close" @click="handleClose">
				<image src="../../../static/image/close.png" mode="aspectFill"></image>
			</view> -->
		</view>
		<view class="mask" v-if="showModal"></view>
		<loginDialog @on-off="headelOff" @on-make="headelMake" :indicate="userLoginDialog"> </loginDialog>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { getUrlParamsInH5, getUrlParamsInWeixin, rpx2px, wxSetUpShareFunction } from "../../../utils/utils";
import { onShareAppMessage, onShareTimeline, onShow } from "@dcloudio/uni-app";
import { getActivityDetailApi, userSubmitSignUpActivityFormApi } from '../../../api/activity';
import { customNav } from "../../../utils/customNav";
import loginDialog from "@/components/login/index.vue";
const userLoginInfo = ref("");
const userLoginDialog = ref(false);
const today = new Date()
const year = today.getFullYear();
const month = ('0' + (today.getMonth() + 1)).slice(-2);
const day = ('0' + today.getDate()).slice(-2);
const hours = ('0' + today.getHours()).slice(-2);
const minutes = ('0' + today.getMinutes()).slice(-2);
const seconds = ('0' + today.getSeconds()).slice(-2);
const dateStr = `${year}-${month}-${day}`
const timeStr = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
const startDate = ref('')

function headelOff () {
  userLoginDialog.value = false;
}
function headelMake () {
  userLoginDialog.value = false;
  userLoginInfo.value = uni.getStorageSync("token");
}
onShow(()=>{
	uni.setStorageSync("is_view_activity", '1')
	/* #ifdef MP-WEIXIN */
	activityId.value = getUrlParamsInWeixin()?.id;
	isVote.value = getUrlParamsInWeixin()?.isVote? true:false;
  isVoteBack.value = getUrlParamsInWeixin()?.isVoteBack? true:false;
	wxSetUpShareFunction();
	/* #endif */
	/* #ifdef H5 */
	activityId.value = getUrlParamsInH5()?.id;
	isVote.value = getUrlParamsInH5()?.isVote? true:false;
  isVoteBack.value = getUrlParamsInH5()?.isVoteBack? true:false;
	/* #endif */
	getActivityData()
})
// import UniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
// const { proxy } = getCurrentInstance();
const isVote = ref(false)
const activityId = ref('')
const activityData = ref({})
const status = ref(0)
const words = ref('')
const rules = ref('')
const showRules = ref(false)
const showShare = ref(false)
const showModal = ref(false)
const isVoteBack = ref(false)

const getActivityData = async () => {
  let token = uni.getStorageSync("token")
  if(token) {
    const { code, data } = await getActivityDetailApi(activityId.value);
    if (code === 200) {
      data.residueDay = !!data.residueDay ? Number(data.residueDay) : 0;
      const st = new Date(data.activityStartTime)
      const sy = st.getFullYear();
      const sm = ('0' + (st.getMonth() + 1)).slice(-2);
      const sd = ('0' + st.getDate()).slice(-2);
      startDate.value = `${sy}-${sm}-${sd}`
      activityData.value = { ...data };
    }
  } else {
    uni.setStorageSync("is_view_activity", '1')
    uni.showModal({
      title: '提示',
      content: '需要登录完善信息，是否去登录？',
      success: function(res) {
        if (res.confirm) {
          // 执行确认后的操作
          uni.navigateTo({ url: "/package_login/pages/login/login" }); //跳转登录页
        }
        else {
          // 执行取消后的操作
        }
      }
    })
  }
}
const handleClose = () => {
	showModal.value = false
}
const handleConfirm = () => {
	showModal.value = false
	handleSignUpBtnClick()
}
const handleClick = () => {
	console.log('current time -----', timeStr, activityData.value)
	if (activityData.value.activityStartTime < timeStr && timeStr <activityData.value.activityEndTime) {
		showModal.value = true
	} else {
		const msg = activityData.value.activityStartTime>timeStr ? '活动还未开始':'活动已结束'
		uni.showToast({
			icon:'none',title:msg
		})
	}
}
const handleIsVoteBackClick = () => {
  uni.redirectTo({
    url:`./activity-vote?id=${activityId.value}`
  })
}
const handleSignUpBtnClick =async () => {
  userLoginInfo.value = uni.getStorageSync("token");
  if (!userLoginInfo.value) {
    userLoginDialog.value = true;
  } else {
	 await uni.showLoading({
	   title: "正在报名...",
	 });
	 const params = {
	   activityId: activityId.value,
	   userName: '',
	   userPhone: '',
	   enterpriseName: '',
	   // ...signUpModel.form,
	 };
	 console.log("报名参数",params);
	 const {code, msg} = await userSubmitSignUpActivityFormApi(params);
	 if (code === 200) {
	   uni.hideLoading();
	   uni.showToast({
			icon:'none',title:msg
	   })
	   setTimeout(()=>{
		   // uni.navigateBack()
		   if (isVote.value) {
			   uni.redirectTo({
			   	url:`./activity-vote?id=${activityId.value}`
			   })
		   } else {
			   uni.redirectTo({
			   	url:`./activity-progress?id=${activityId.value}`
			   })
		   }
	   }, 300)
	 } else if (code === 400) {
	   uni.hideLoading();
	 }
    // customNav(`../activity-sign-up?activityId=${activityId.value}`);
  }
}
const handleShowRule = (flag) => {
	showRules.value = flag
}

onShareAppMessage(()=>{
  return {
    title:activityData.value.activityName,
    path:`/package_activity/pages/activity/activity-user-info?isVote=1&id=${activityId.value}`,
    imageUrl:activityData.value.activityPoster
  }
})

onShareTimeline(()=>{
  return {
    title:activityData.value.activityName,
    imageUrl:activityData.value.activityPoster
  }
})

</script>

<style lang="less" scoped>
.main{
	position: relative;
	height: 100vh;
	// background-color: #ffffff;
	.head{
		background-color: #ffffff;
		padding: 25rpx 35rpx;
		.sta_0{
			font-weight: bold;
			.txt{
				color: #00B689;
				margin-left: 10rpx;
			}
		}
		.sta_1{
			font-weight: bold;
			color: #618EEE;
		}
		.sta_2{
			font-weight: bold;
			color: #6D6D6D;
		}
		.item{
			display: flex;
			flex-direction: column;
			width: 680rpx;
			margin-top: 20rpx;
			.cover{
				width: 680rpx;
				border-radius: 15rpx;
				margin-bottom: 10rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 15rpx;
				}
			}
			.title{
				width: 680rpx;
				margin-bottom: 10rpx;
				font-weight: bold;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3; /* 控制显示的行数 */
				-webkit-box-orient: vertical;
			}
			.time{
				width: 680rpx;
				color: #6B6B6B;
				margin-bottom: 10rpx;
				font-size: 23rpx;
			}
			.num{
				width: 680rpx;
				color: #6B6B6B;
				margin-bottom: 10rpx;
				font-size: 23rpx;
			}
			.addr{
				width: 680rpx;
				color: #6B6B6B;
				margin-bottom: 10rpx;
				font-size: 23rpx;
			}
			.at{
				width: 680rpx;
				color: #6B6B6B;
				margin-bottom: 20rpx;
				font-size: 23rpx;
			}
		}

	}
	.con{
		padding: 25rpx 35rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
		padding-bottom: 160rpx;
		.tab{
			width: 680rpx;
			display: flex;
			.label{
				width: 175rpx;
				height: 100rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.title{
					font-weight: bold;
					margin-bottom: 10rpx;
				}
				.line{
					width: 70rpx;
					border: 5rpx solid #00B689;
					// border-bottom: 5rpx solid #00B689;
					border-radius: 5rpx;
				}
			}
		}
		.info{
			.words{
				.txt{
					image{
						width: 680rpx;
						border-radius: 20rpx;
					}
				}
			}
			.rules{
				.txt{
					image{
						width: 680rpx;
						border-radius: 20rpx;
					}
				}
			}
		}
	}
	.foot{
		position: fixed;
		z-index: 1;
		bottom: 0;
		width: 100vw;
		background-color: #F6F8FC;
		.box{
			background-color: #ffffff;
			width: 100vw;
			height: 140rpx;
			margin-top: 20rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			// .btn_l{
			// 	width: 295rpx;
			// 	height: 60rpx;
			// 	border: 1rpx solid #00B689;
			// 	text-align: center;
			// 	line-height: 60rpx;
			// 	color: #00B689;
			// 	border-radius: 50rpx;
			// 	font-weight: bold;
			// }
			.btn_r{
				width: 680rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				color: #ffffff;
				border-radius: 50rpx;
				background: linear-gradient(to right,#01E4BF,#0080DB);
				&.over{
					background: linear-gradient(to right,#575757,#E4E4E4);
				}
			}
		}
	}
	.modal{
		position: fixed;
		top: 20vh;
		left: 75rpx;
		z-index: 2;
		width: 600rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		.box{
			width: 600rpx;
			height: 580rpx;
			border-radius: 25rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-color: #ffffff;
			.h{
				width: 400rpx;
				height: 400rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.m{
				margin-top: 10rpx;
				color: #666666;
				font-size: 28rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.f{
				margin-top: 10rpx;
				color: #0080DB;
				font-size: 36rpx;
			}

		}
		.close{
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			background-color: #ffffff;
			opacity: 0.8;
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width: 80%;
				height: 80%;
			}
		}
	}
	.mask{
		position: fixed;
		bottom: 0;
		z-index: 1;
		width: 100vw;
		height: 100vh;
		background-color: #000000;
		opacity: 0.5;
	}
}
</style>
